Photos - enlarge pictures

simple example: mouse over pictures

code:

                <div class="ex">
                    <img id="myImage" src="../images/1.jpg" alt="picture" title="photo" alt="Sample Image" style="width: 300px; cursor: pointer;">
                    <img src="../images/2.jpg" alt="picture" title="photo" class="one" alt="picture" title="photo"/>
                    <img src="../images/3.jpg" alt="picture" title="photo" class="two" alt="picture" title="photo"/>
                    <img src="../images/4.jpg" alt="picture" title="photo" class="one" alt="picture" title="photo">
                    <img src="../images/5.jpg" alt="picture" title="photo" class="two" alt="picture" title="photo"/>
                    <img src="../images/6.jpg" alt="picture" title="photo" class="one" alt="picture" title="photo"/>
                    <style>
                        #example_1 img{width: 10vw; height: 10vw;}
                        .zoomed {transform: scale(1.2); transition: transform 0.25s ease; }
                        #example_1 .one:hover { height: 12vw; width: 12vw;}
                        #example_1 .two:hover{ transform:scale(0.5);}
                    </style>
                    <script>
                        document.getElementById('myImage').addEventListener('mouseover', function() {
                            this.classList.toggle('zoomed')});
                    </script>
                </div>

multiple photos to enlarge and shrink

code:

                <div class="ex">
                    <div>
                        <img src="../images/1.jpg" alt="picture" title="photo"/>
                        <img src="../images/2.jpg" alt="picture" title="photo"/>
                        <img src="../images/3.jpg" alt="picture" title="photo"/>
                        <img src="../images/4.jpg" alt="picture" title="photo"/>
                        <img src="../images/5.jpg" alt="picture" title="photo"/>
                    </div>
                    <style>
                        #example_2 img {height: 200px;  width: 200px; margin: 10px;}
                        #example_2 img:hover{height: 400px; width: 400px; }
                    </style>
                </div>

click to enlarge photos

code:

                <div>
                    <img src="../images/5.jpg" alt="picture" title="photo" height="200px" width="200px"/>
                    <img src="../images/6.jpg" alt="picture" title="photo" height="200px" width="200px"/>
                    <img src="../images/7.jpg" alt="picture" title="photo" height="200px" width="200px"/>
                    <img src="../images/8.jpg" alt="picture" title="photo" height="200px" width="200px"/>
                    <img src="../images/9.jpg" alt="picture" title="photo" height="200px" width="200px"/>
                </div>
                <script>
                    var images_a = document.getElementsByTagName('img');
                    for (var i = 0; i < images_a.length; i++) {
                        images_a[i].addEventListener('click', function() {
                            for (var j = 0; j < images_a.length; j++) {
                                if (i != j) {
                                    images_a[j].style.transform = 'scale(1)';
                                }
                            }   
                            this.style.transform = 'scale(1.3)';
                            this.style.margin = '40px'
                        });
                    } 
                
                </script>

click to enlarge the picture

code:

                <div id="image-container">
                    <img src="../images/10.jpg" alt="picture" title="photo" alt="Shanghai" width="25%" height="auto"/>
                </div>
                <style>
                    #image-container { position: relative;}
                    #image-container img {display: block; max-width: 100%;}
                    #image-container:hover img { transform: scale(1.2); transition: transform 0.4s ease-in-out;}
                </style>
                <script>
                    var imgContainer = document.getElementById('image-container');
                    var img = imgContainer.getElementsByTagName('img')[0];
    
                    img.addEventListener('click', function() {
                        var enlargedImg = document.createElement('img');
                        enlargedImg.src = img.src;
                        enlargedImg.style.position = 'absolute';
                        enlargedImg.style.top = 0;
                        enlargedImg.style.left = 0;
                        enlargedImg.style.width = '50%';
                        imgContainer.appendChild(enlargedImg);
                    });
                </script>

multiple photos to click to enlarge

holiday 1

holiday 2

holiday 3

holiday 4

holiday 5

holiday 6

code:

                <main>
                    <div image-wrapper>
                        <img src="../images/1a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable>
                        <div caption><p>holiday 1</p></div>
                    </div>
                    <div image-wrapper>
                        <img src="../images/2a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                        <div caption><p>holiday 2</p></div>
                    </div>
                    <div image-wrapper>
                        <img src="../images/3a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                        <div caption><p>holiday 3</p></div>
                    </div>
                    <div image-wrapper>
                        <img src="../images/4a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                        <div caption><p>holiday 4</p></div>
                    </div>
                    <div image-wrapper>
                        <img src="../images/5a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                        <div caption><p>holiday 5</p></div>
                    </div>
                    <div image-wrapper>
                        <img src="../images/6a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable> 
                        <div caption><p>Sholiday 6</p></div>
                    </div>
                </main>
                <style>
                    main { width: 1400px; height:400px;  margin-inline: 1vw; padding: 25px;  gap: 10px; display: flex;  flex-direction: row;  flex-wrap: wrap; justify-content: center; }
                    /*This is a more detailed style for just the immage wrappers*/
                    [image-wrapper] {display: flex;  flex-direction: column;  gap: 10px; padding: 5px;  width: 200px;  height: 300px; background: #fff;  border-radius: 20px 20px 20px 20px; 
                        overflow: hidden; box-shadow: 0 3px 15px hsl(0, 0%, 0%, 0.35); justify-content: center;  }
                    /*This is a more detailed style for all the images within the image wrappers*/
                    [image-wrapper] img {  border-radius: 10px 10px 10px 10px; justify-content: center; cursor:zoom-in;}
                    /*This is a style for the caption in the image wrapper in general*/
                    [caption] {display: boarder;  padding: 5px; text-align: center; width:200px; background: #add8e6; color: blue;  border-radius: 20px 20px; }
                    /*This is a style of how I want the caption to look like in the image wrapper*/
                    [image-wrapper] [caption] {text-align:center; }
                </style>
                <script>
                    //This is where the `constant` is started ans stated
                    const imageWrappers = document.querySelectorAll('[image-wrapper]');
                    
                    //This is a function I gave to show the image sources that are previwable
                    function showPreview(imgSrc) {
                    const previewImg = document.createElement('img');
                    const overlay = document.createElement('div');
                    
                    //This is the method that states that `imgSrc` from earlier is supposed to use the image sorces given 
                    previewImg.setAttribute('src', imgSrc);
                    
                    //This is where I styled how I want my image to look like after it's enlarged
                    previewImg.style.position = 'fixed';
                    previewImg.style.left = '50%';
                    previewImg.style.top = '50%';
                    previewImg.style.transform = 'translate(-50%, -50%)';
                    previewImg.style.maxWidth = '90%';
                    previewImg.style.maxHeight = '80%';
                    previewImg.style.zIndex = '9999';
    
                    //This is the overlay that I used that will give the background a bit of a blur once an image is enlarged and also where I style how I want the blurr to look like
                    overlay.style.position = 'fixed';
                    overlay.style.left = '0';
                    overlay.style.top = '0';
                    overlay.style.width = '100%';
                    overlay.style.height = '100%';
                    overlay.style.background = 'rgba(0, 0, 0, 0.5)'; 
    
                    //These is where a new element is created or stored
                    document.body.appendChild(previewImg);
                    document.body.appendChild(overlay);
                    
                    //This is a method that uses `EventListner`so everytime I click the image it will enlarge 
                    overlay.addEventListener('click', closePreview);
    
                    //This is where I function the new element to be removed after any click from the previous line
                    function closePreview() {
                        document.body.removeChild(overlay);
                        document.body.removeChild(previewImg);
    
                    //This is a method that uses `EventListner`so everytime I click anywhere the enlarged image will disappear or go back to normal
                        overlay.removeEventListener('click', closePreview);
                    }
                    }
                    //This is a method that is used to apply/trigger the functions given before that enlarges and unenlarges the image  
                    imageWrappers.forEach(imageWrapper => {
                        imageWrapper.addEventListener('click', (event) => {
                            const img = imageWrapper.querySelector('img');
                            showPreview(img.getAttribute('src'));
                        });
                    });
                </script>

enlage picture on hover

code:

                <div class="images-container">
                    <img src="../images/10a.jpg" alt="picture" title="photo" alt="Sample Image" class="hover-image">
                </div>
                <style>
                    .images-container {display: inline-block; overflow: hidden;}
                    .hover-image { width: 300px;  height: auto; transition: transform 0.3s ease;}
                </style>
                <script>
                    document.addEventListener('DOMContentLoaded', () => {
                        const image = document.querySelector('.hover-image');
                        image.addEventListener('mouseover', () => {
                            image.style.transform = 'scale(1.5)';
                        });
                        image.addEventListener('mouseout', () => {
                            image.style.transform = 'scale(1)';
                        });
                    });
                </script>

click to enlarge and use button to reduce

code:

                <div>
                    <div class="container">
                        <img src="../images/5.jpg" alt="picture" title="photo" id="three" onclick="enlargeImg_A()"/>
                        <img src="../images/7.jpg" alt="picture" title="photo" id="four" onclick="enlargeImg_B()"/>
                    </div>
                    <button onclick="resetImg_A()">A</button>
                    <button onclick="resetImg_B()">B</button>
                </div>
                <style>
                    #example_7 img{width: 10vw; height: 10vw;margin-left: 2vw;}
                    button{width: 4vw; height: 2vw; background-color: lightgreen; margin: 2vw;}
                    #imageContainer{margin-left: 2vw;}
                </style>
                <script>
                    img_A = document.getElementById("three");
                    function enlargeImg_A() {
                        img_A.style.transform = "scale(1.5)";
                        img_A.style.transition = "transform 0.25s ease";
                    }
                    function resetImg_A(){
                    img_A.style.transform = "scale(1)";
                    img_A.style.transition = "transform 0.25s ease";
                    }
            
                    img_B = document.getElementById("four");
                    function enlargeImg_B() {
                        img_B.style.width = "12%";
                        img_B.style.height = "12%";
                        img_B.style.transition = "width 0.5s ease";
                    }
                    function resetImg_B() {
                        img_B.style.width = "10%";
                        img_B.style.height = "10vw";
                        img_B.style.transition = "width 0.5s ease";
                    }
                </script>